<template>
	<uni-popup ref="store" type="bottom">
		<scroll-view scroll-y="true">
			<view class="store">
				<view class="title flex_r_between">
					<text></text>
					<view>店铺信息</view>
					<uni-icons type="clear" :size="24" color="#BFB7B9" @click="close"></uni-icons>
				</view>
				<view class="header flex_c">
					<image src="/static/technician/store_icon.png"></image>
					<text>{{data.store_name}}</text>
				</view>
				<view class="info">
					<view class="rate flex">
						<text>店铺评分</text>
						<uni-rate allow-half :value="data.high_opinion/data.opinion*5 || 5" disabledColor="#EF5233" disabled :size="18" />
						<view>{{data.high_opinion ? Number(data.high_opinion/data.opinion*5).toFixed(0) : 5}}分</view>
					</view>
					<view class="name flex">
						<text class="tit">公司名称</text>
						<view class="hidden">{{data.company_name || '未填写'}}</view>
						<text class="tag">已认证</text>
					</view>
					<view class="num flex">
						<view class="item flex_c">
							<view>{{data.order_num || 0}}</view>
							<text>服务次数</text>
						</view>
						<view class="item flex_c no_border">
							<view>{{data.high_opinion ? Number(data.high_opinion/data.opinion*100).toFixed(0) : 100}}%</view>
							<text>好评率</text>
						</view>
					</view>
				</view>
				<view class="card flex_c">
					<view class="rubric flex_r_between">
						<image src="/static/technician/store_line.png"></image>
						<view>营业资质</view>
						<image src="/static/technician/store_line.png"></image>
					</view>
					<image :src="data.yyzz && data.yyzz.image" mode="widthFix" class="image" @click="previewImg(data.yyzz.image)"></image>
				</view>
				<view class="card flex_c">
					<view class="rubric flex_r_between">
						<image src="/static/technician/store_line.png"></image>
						<view>店铺介绍</view>
						<image src="/static/technician/store_line.png"></image>
					</view>
					<view class="text">{{data.remark}}</view>
				</view>
			</view>
		</scroll-view>
		
	</uni-popup>
</template>

<script>
	export default {
		name: "store",
		data() {
			return {
				data: '',
			};
		},
		props: {
			
		},
		methods: {
			open(e) {
				this.request.httpTokenRequest({
					url: "index/getStoleInfo",
					method: "get",
				}, {
					store_id:e
				}).then(res => {
					if (res.code == 0) {
						this.data = res.data
						this.$refs.store.open()
					}else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			close(){
				this.$refs.store.close()
			},
			previewImg(e){
				uni.previewImage({
					urls:[e]
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	scroll-view {
		height: 60vh;
		overflow: hidden;
		border-radius: 30rpx 30rpx 0 0;
	}
	.store {
		width: 100vw;
		background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/store.png) 0 0 no-repeat;
		background-size: 100%;
		padding: 28rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #F5F7F8;
		position: relative;
		border-radius: 30rpx 30rpx 0 0;
	}
	.title {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/store.png) 0 0 no-repeat;
		background-size: 100%;
		width: 100%;
		position: sticky;
		padding: 0 30rpx 0;
		top: 0;
		left: 0;
		height: 80rpx;
		z-index: 99;
		view {
			font-size: 34rpx;
			font-weight: 600;
			color: #0B070E;
			line-height: 48rpx;
		}
		text {
			width: 24px;
			height: 24px;
		}
	}
	.header {
		margin: 33rpx 0 32rpx;
		image {
			width: 255rpx;
			height: 149rpx;
		}
		text {
			font-size: 30rpx;
			font-weight: 600;
			color: #0B070E;
			line-height: 42rpx;
			margin-top: 4rpx;
		}
	}
	
	.info {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin: 0 30rpx 0;
		.rate {
			align-items: center;
			text {
				font-size: 30rpx;
				font-weight: 600;
				color: #0B070E;
				line-height: 42rpx;
				margin-right: 20rpx;
			}
			view {
				font-size: 30rpx;
				font-weight: 600;
				color: #0B070E;
				line-height: 42rpx;
				margin-left: 10rpx;
			}
		}
		.name {
			align-items: center;
			margin: 30rpx 0;
			.tit {
				font-size: 30rpx;
				font-weight: 600;
				color: #0B070E;
				line-height: 42rpx;
				margin-right: 20rpx;
			}
			.tag {
				padding: 1rpx 5rpx;
				background: #5E90DB;
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				margin-left: 19rpx;
			}
			view {
				max-width: 360rpx;
				font-size: 30rpx;
				color: #0B070E;
				line-height: 42rpx;
			}
		}
		.num {
			background: #F5F6F7;
			border-radius: 12rpx;
			padding: 18rpx 0;
			.item {
				width: 50%;
				border-right: 1rpx solid #DFDFDF;
				view {
					font-size: 32rpx;
					font-weight: 600;
					color: #0B070E;
					line-height: 45rpx;
				}
				text {
					font-size: 24rpx;
					color: #0B070E;
					line-height: 33rpx;
				}
			}
		}
	}
	
	.card {
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
		padding: 30rpx 30rpx 35rpx;
		margin: 30rpx 30rpx 0;
		
		.rubric {
			align-items: center;
			image {
				width: 31rpx;
				height: 25rpx;
			}
			view {
				font-size: 32rpx;
				font-weight: 600;
				color: #EF5233;
				line-height: 45rpx;
				margin: 0 22rpx;
			}
		}
		.image {
			width: 345rpx;
			margin-top: 32rpx;
		}
		.text {
			font-size: 25rpx;
			color: #131415;
			line-height: 36rpx;
			margin-top: 18rpx;
		}
	}
	
</style>